# 自定义label标签
<LabelLogin@Label>:
  font_size: 18
  markup: True
  size_hint: (.2, None) # 宽度为20%，高度不设置
  height: 35 # 设置高度固定35，需要先将size_hint的高度设为None
  pos_hint: {"center_x": 0.5, "center_y": 0.5} # 居中显示
  # 使用canvas.before设置边框样式
#  canvas.before:
#    Color:
#      rgba: 1, 0, 0, 0.5  # 设置颜色为红色
#    Line:
#      width: 1  # 设置边框宽度
#      rectangle: self.x, self.y, self.width, self.height

# 自定义TextInput标签
<TextInputLogin@TextInput>:
  font_size: 18
  size_hint: (.8, None)
  height: 35
  pos_hint: {"center_x": 0.5, "center_y": 0.5} # 居中显示
  foreground_color: 0, 0.5, 0.7, 1  # 设置文字为蓝灰色
  background_color: 1, 1, 1, 0.2  # 设置背景为白色半透明
  write_tab: False # 通过禁止输入tab键实现按tab键在多个输入框之间切换
  multiline: False

# 自定义按钮
<ButtonComm@Button>:
  font_size: 18
# size_hint: (.2, .5) # 设置为百分比大小
  size_hint: None, None
  size: 100, 35 # 设置按钮固定大小，需要先设置size_hint为None
  pos_hint: {"center_x": 0.5, "center_y": 0.5} # 居中显示
#  bold: True
#  border: 1, 0, 0, 1
  background_color: 0.529, 0.808, 0.922, 0.7 # 按钮背景颜色


# 下面是页面的实现
ScreenManagement:
  image: 'yangshuo.jpg' # 定义一个图片路径
  canvas:
    Rectangle:
      size: self.size
      pos: self.pos
      source: root.image # 引用图片路径设置背景图
  LoginPage:
  MainPage:

<LoginPage>: # 定义登录页面
  # 设置背景颜色
  name: "login_page"
  BoxLayout: # 整个登录框的布局样式
    size_hint: (None, None)
    size: 500, 300
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}  # 将BoxLayout放置在页面中间
    canvas.before:
      Color:
        rgba: 0.5, 0.5, 0.5, 0.3
      Rectangle:
        size: self.size
        pos: self.pos
    orientation: 'vertical' # 默认BoxLayout排版是纵向排版(horizontal)，若需要改为横向排版则可在KV文件里添加参数orientation: "vertical"
#    spacing: 10  # 设置上间距为10像素
    padding: 30,30 # 设置内间距
    BoxLayout:
      orientation: 'vertical'
      size_hint: (1, None)
      height: 50
      padding: 0, 0, 0, 15
#      canvas.before:
#        Color:
#          rgba: 0, 1, 0, 0.2  # 设置颜色为红色
#        Line:
#          width: 1  # 设置边框宽度
#          rectangle: self.x, self.y, self.width, self.height
      Label:
        text: '欢迎'
        font_size: 30
        bold: True
    BoxLayout:
      orientation: 'horizontal'
#      canvas.before:
#        Color:
#          rgba: 0, 1, 0, 0.2  # 设置颜色为红色
#        Line:
#          width: 1  # 设置边框宽度
#          rectangle: self.x, self.y, self.width, self.height
      LabelLogin:
        text: "用户名："
      TextInputLogin:
        id: user_name
        on_text_validate: root.verify_credentials()
    BoxLayout:
      orientation: 'horizontal'
#      canvas.before:
#        Color:
#          rgba: 0, 1, 0, 0.2  # 设置颜色为红色
#        Line:
#          width: 1  # 设置边框宽度
#          rectangle: self.x, self.y, self.width, self.height
      LabelLogin:
        text: "密码："
      TextInputLogin:
        id: password
        password: True # 输入显示为星星
        on_text_validate: root.verify_credentials()
    FloatLayout:
      size_hint: (1, None)
#      size: 500, 40
      height: 50
#      canvas.before:
#        Color:
#          rgba: 0, 1, 0, 0.2  # 设置颜色为红色
#        Line:
#          width: 1  # 设置边框宽度
#          rectangle: self.x, self.y, self.width, self.height
      ButtonComm: # 使用自定义按钮
        text: "登录"
        on_release: root.verify_credentials() # on_text_validate，on_release


<MainPage>:
  name: "main"
  GridLayout:
    rows: 2
    cols: 3
    padding: 10
    spacing: 10
    ButtonComm:
      text: "back"
      on_release: app.root.current = "login_page"